<style lang="scss">
    .Login{
        width:100vw;
        position: relative;
        // 背景图定位
        .imgsone{
            background: #409eff;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            margin-top: 200px;
        }
        .login_con{
            box-sizing: border-box;
            position: absolute;
            left: 0;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            padding: 50px 0;
            right: 0;top: 0;
            bottom: 0;
            width: 360px;
            margin: 140px auto 360px;
            border: 1px solid #ccc;
            border-top: 10px solid #409eff;
            border-radius: 4%;
            background-color: #fff;
            color: #303133;
            transition: .3s;
 
            .LogTop{
                    background-color: #fff;
                    color: #303133;
                    transition: .3s;
                img{
                    // 头像
                    width: 56px;
                    height: 56px;
                    display: block;
                    margin: 10px auto;
                }
                h1{
                    text-align: center;
                    color: #409EFF;
                    font-size: 18px;
                }
            }
            .InputOn{
                    background-color: #fff;
                    color: #303133;
                   
                    text-align: center;
                    transition: .3s;
                    box-sizing: border-box;
                    input{
                         -webkit-appearance: none;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #dcdfe6;
                        box-sizing: border-box;
                        color: #606266;
                        display: inline-block;
                        font-size: inherit;
                        height: 40px;
                        line-height: 40px;
                        outline: 0;
                        padding: 0 15px;
                        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                        width: 90%;
                        margin: 10px 0;
                    }
            }
            // 底部按钮
            .LogBottom{
                width: 100%;
                line-height: 40px;
                font-size: 14px;
                background-color: #fff;
                button{
                    margin: 15px 0;
                    width: 50%;
                    background-color: #409eff;
                    border-color: #409eff;
                    display: inline-block;
                    line-height: 1;
                    white-space: nowrap;
                    cursor: pointer;
                    border: 1px solid #dcdfe6;
                    color: #fff;
                    -webkit-appearance: none;
                    text-align: center; 
                    box-sizing: border-box; 
                    outline: 0; 
                    transition: .1s; 
                    padding: 12px 20px;
                    font-size: 14px; 
                    border-radius: 4px;
                }
            }
        }
        }
</style>

<template>
    <div class="Login">
        <img class="imgsone" src="https://www.macrozheng.com/admin/static/img/login_center_bg.5307896.png" alt="加载失败">
        <main class="login_con">
            <div class="LogTop">
                <img src="../../assets/10.jpeg" alt="加载失败">
                <h1>mall-admin-web</h1>
            </div>
            <!-- input --> 
            <aside class="InputOn">
                <!-- 账号 -->
                <input type="text" v-model="objPage.username">
                <!-- 密码 -->
                <input type="password" v-model="objPage.password">
            </aside>
            <!-- 按钮 -->
            <footer class="LogBottom">
                <button @click="Onbtn()">登录</button>
                <button>获取体验账号</button>
            </footer>
           
        </main>
    </div>
</template>
<script setup lang="ts">
// ts导入
import {LoginApi} from '@/utils/types'
// 使用reactive
import { reactive }  from 'vue';
// 导入接口
import { Login} from '@/api/index'
// 导入elementplus的消息提示的组件
import { ElMessage } from 'element-plus';
// 导入store
import {store} from '@/store/index';
// 导入配置好的router
import router from '@/router/index'

// 创建store参数
// const store = useStore()
console.log(store);

// 创建响应式对象数据

const objPage:LoginApi = reactive({
    username:'',
    password:'',

})
// 提交登录
function Onbtn():void {
    // console.log(123);

    if(objPage.username.length <= 0){
        ElMessage.error('请输入用户名')
        return
    }
    if(objPage.password.length <= 0){
        ElMessage.error({
        message: '请输入密码',
        type:'error'
    })
       
        return
    }
    Login(objPage).then((res:any) => {
        // console.log(res);
        if(res.code === 200){
            // localStorage.setItem('token',res.data.tokenHead + res.data.token)
            // store.$patch({

            // })
            // console.log(123);
            // 改变token状态
            store.token = res.data.tokenHead + res.data.token;
            //    提示
            const msg:any =  ElMessage.success('登录成功'); 
            // router跳转
            setTimeout(()=>{
                // 关闭 提示
                msg.close();
                router.push("/")

            },1500);
        }
        else{
            ElMessage.error(res.message)
        }
    })
}
</script>
